<template>
  <div class="ai-models min-h-screen bg-base-100">
    <!-- 页面头部 -->
    <div class="ai-models__header relative overflow-hidden py-16 md:py-24 px-4">
      <!-- 背景装饰 -->
      <div
        class="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-accent/5"
      ></div>
      <div
        class="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(139,92,246,0.1),transparent_50%)]"
      ></div>
      <div
        class="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(236,72,153,0.1),transparent_50%)]"
      ></div>

      <div class="container mx-auto max-w-7xl relative z-10">
        <div class="text-center">
          <!-- 图标装饰 -->
          <div class="inline-block mb-4 animate-bounce-slow">
            <div class="text-6xl md:text-7xl filter drop-shadow-lg">🤖</div>
          </div>

          <h1 class="text-5xl md:text-6xl lg:text-7xl font-black mb-6 leading-tight">
            <span
              class="bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent animate-gradient"
            >
              AI 模型库
            </span>
          </h1>

          <p class="text-xl md:text-2xl text-base-content/80 max-w-3xl mx-auto font-light mb-8">
            探索前沿 AI 技术 · 释放无限创造力
          </p>

          <!-- 特性标签 -->
          <div class="flex flex-wrap gap-2 justify-center mb-8">
            <span class="badge badge-lg badge-primary gap-2">
              <PhSparkle :size="16" />
              智能强大
            </span>
            <span class="badge badge-lg badge-secondary gap-2">
              <PhLightningA :size="16" />
              快速响应
            </span>
            <span class="badge badge-lg badge-accent gap-2">
              <PhShieldCheck :size="16" />
              安全可靠
            </span>
          </div>
        </div>

        <!-- 搜索和筛选 -->
        <div class="mt-8 flex flex-col md:flex-row gap-4 justify-center items-center">
          <!-- 搜索框 -->
          <div class="relative w-full md:w-96 group">
            <PhMagnifyingGlass
              :size="20"
              class="absolute left-4 top-1/2 -translate-y-1/2 text-base-content/40 group-focus-within:text-primary transition-colors"
            />
            <input
              v-model="searchQuery"
              type="text"
              placeholder="搜索模型、功能、标签..."
              class="input input-bordered w-full pl-12 pr-4 h-12 bg-base-200/50 backdrop-blur-sm focus:bg-base-100 focus:border-primary transition-all"
            />
          </div>

          <!-- 分类筛选 -->
          <div class="flex gap-2 flex-wrap justify-center">
            <button
              v-for="category in categories"
              :key="category.id"
              :class="[
                'btn btn-sm gap-2 transition-all hover:scale-105',
                selectedCategory === category.id
                  ? 'btn-primary shadow-lg'
                  : 'btn-ghost bg-base-200/50 backdrop-blur-sm hover:bg-base-200',
              ]"
              @click="selectedCategory = category.id"
            >
              <span class="text-lg">{{ category.icon }}</span>
              <span>{{ category.name }}</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 模型列表 -->
    <div class="ai-models__content container mx-auto max-w-7xl px-4 py-12">
      <!-- 统计信息 -->
      <div
        class="stats stats-vertical lg:stats-horizontal shadow-xl mb-12 w-full bg-gradient-to-br from-base-200 to-base-300 border border-base-content/10"
      >
        <div
          class="stat place-items-center hover:bg-primary/10 transition-all cursor-pointer group"
        >
          <div class="stat-title text-base-content/60 group-hover:text-primary transition-colors">
            总模型数
          </div>
          <div class="stat-value text-primary text-5xl font-black">{{ filteredModels.length }}</div>
          <div class="stat-desc text-base-content/50">可用的 AI 模型</div>
        </div>

        <div
          class="stat place-items-center hover:bg-secondary/10 transition-all cursor-pointer group"
        >
          <div class="stat-title text-base-content/60 group-hover:text-secondary transition-colors">
            功能类型
          </div>
          <div class="stat-value text-secondary text-5xl font-black">
            {{ categories.length - 1 }}
          </div>
          <div class="stat-desc text-base-content/50">不同的功能分类</div>
        </div>

        <div class="stat place-items-center hover:bg-accent/10 transition-all cursor-pointer group">
          <div class="stat-title text-base-content/60 group-hover:text-accent transition-colors">
            提供商
          </div>
          <div class="stat-value text-accent text-5xl font-black">{{ providers.length }}</div>
          <div class="stat-desc text-base-content/50">AI 服务提供商</div>
        </div>
      </div>

      <!-- 模型卡片网格 -->
      <div
        v-if="filteredModels.length > 0"
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
      >
        <ModelCard
          v-for="model in filteredModels"
          :key="model.id"
          :model="model"
          @use="handleUseModel"
        />
      </div>

      <!-- 空状态 -->
      <div
        v-else
        class="text-center py-20 bg-base-200/30 rounded-3xl border-2 border-dashed border-base-content/20"
      >
        <div class="animate-pulse mb-6">
          <PhRobot :size="96" class="mx-auto text-base-content/20" />
        </div>
        <p class="text-2xl font-bold text-base-content/70 mb-2">未找到匹配的模型</p>
        <p class="text-base-content/50 mb-6">尝试调整搜索条件或重置筛选</p>
        <button
          class="btn btn-primary btn-lg gap-2 shadow-lg hover:scale-105 transition-transform"
          @click="resetFilters"
        >
          <PhArrowCounterClockwise :size="20" />
          重置筛选
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  PhMagnifyingGlass,
  PhRobot,
  PhSparkle,
  PhLightningA,
  PhShieldCheck,
  PhArrowCounterClockwise,
} from '@phosphor-icons/vue'
import ModelCard from '@/components/custom/ModelCard.vue'

const router = useRouter()

/**
 * AI 模型数据接口
 */
interface AIModel {
  id: string
  name: string
  provider: string
  description: string
  features: string[]
  category: string
  icon: string
  status: 'active' | 'beta' | 'coming-soon'
  pricing: {
    type: 'per-image' | 'per-token' | 'free'
    amount?: number
    unit?: string
  }
  capabilities: {
    streaming?: boolean
    batch?: boolean
    maxLength?: number
  }
  tags: string[]
}

/**
 * 分类数据
 */
const categories = ref([
  { id: 'all', name: '全部', icon: '📚' },
  { id: 'text-to-image', name: '文生图', icon: '🎨' },
  { id: 'text-generation', name: '文本生成', icon: '✍️' },
  { id: 'image-to-text', name: '图生文', icon: '🖼️' },
  { id: 'speech', name: '语音处理', icon: '🎤' },
])

/**
 * 提供商列表
 */
const providers = ref([{ id: 'minimax', name: 'MiniMax', logo: '🤖' }])

/**
 * 模型数据
 */
const models = ref<AIModel[]>([
  {
    id: 'minimax-image-01',
    name: 'MiniMax 文生图',
    provider: 'MiniMax',
    description: '强大的文本到图像生成模型，支持多种风格和尺寸，生成高质量的图片作品',
    features: [
      '支持多种宽高比 (1:1, 16:9, 9:16, 4:3, 3:4)',
      '返回 URL 或 Base64 格式',
      '最大提示词长度 1000 字符',
      '2 分钟超时保护',
    ],
    category: 'text-to-image',
    icon: '🎨',
    status: 'active',
    pricing: {
      type: 'per-image',
      amount: 0.05,
      unit: '美元/张',
    },
    capabilities: {
      streaming: false,
      batch: false,
      maxLength: 1000,
    },
    tags: ['图像生成', '创意设计', 'AI绘画'],
  },
])

/**
 * 搜索和筛选
 */
const searchQuery = ref('')
const selectedCategory = ref('all')

/**
 * 过滤后的模型列表
 */
const filteredModels = computed(() => {
  let result = models.value

  // 按分类筛选
  if (selectedCategory.value !== 'all') {
    result = result.filter((model) => model.category === selectedCategory.value)
  }

  // 按搜索词筛选
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(
      (model) =>
        model.name.toLowerCase().includes(query) ||
        model.description.toLowerCase().includes(query) ||
        model.provider.toLowerCase().includes(query) ||
        model.tags.some((tag) => tag.toLowerCase().includes(query)),
    )
  }

  return result
})

/**
 * 重置筛选
 */
const resetFilters = () => {
  searchQuery.value = ''
  selectedCategory.value = 'all'
}

/**
 * 使用模型 - 跳转到模型使用页面
 */
const handleUseModel = (model: AIModel) => {
  router.push(`/ai-models/${model.id}`)
}

/**
 * 组件挂载
 */
onMounted(() => {
  console.log('🤖 AI 模型库加载完成')
})
</script>

<style scoped lang="scss">
.ai-models {
  &__header {
    position: relative;
    overflow: hidden;
  }

  &__content {
    animation: fadeIn 0.6s ease-out;
  }
}

// 渐变动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 缓慢弹跳动画
@keyframes bounce-slow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-bounce-slow {
  animation: bounce-slow 3s ease-in-out infinite;
}

// 渐变背景动画
@keyframes gradient {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient {
  background-size: 200% auto;
  animation: gradient 8s ease infinite;
}

// 卡片网格动画
.grid > * {
  animation: scaleIn 0.5s ease-out backwards;

  @for $i from 1 through 12 {
    &:nth-child(#{$i}) {
      animation-delay: #{$i * 0.05}s;
    }
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

// 统计卡片动画
.stats > * {
  animation: slideInUp 0.6s ease-out backwards;

  @for $i from 1 through 3 {
    &:nth-child(#{$i}) {
      animation-delay: #{$i * 0.1}s;
    }
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
